import React, { Component } from 'react';
import {
  AppRegistry, 
  StyleSheet, 
  Text, 
  ScrollView, 
  TextInput, 
  View, 
  TouchableHighlight,  
  Image,   
  TouchableOpacity, 
  Picker,
}
from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import DatePicker from 'react-native-datepicker'
export  default class YrbMemberInfo extends Component { 

 state = {
    loading: true,
    error: false,
    editor: [],

	
  }
  

  
	
  params =[{
	        title:{},
            sign:{},
            sex:{},
            stature:{},
            avoirdupois:{},
            birthday:{},
            star:{},
            nativeplace:{},
            job:{},
            lang:{},
            school:{},
            interest:{},
            act_type:{},
            proxy_company:{},
            works:{},
            job_exp:{},
            honour:{},
            tel: {},
			wx:{},
            qq:{},
            email:{},
            body:{},

	  }]
  
  
    componentWillMount = async () => {
    try {
      const response = await fetch('http://121.42.49.27:8002/api/cc/act?mod=user3&act=my_info&username=13738127783&password=garefu')
      const posts = await response.json()
	  let  editor  = posts.data;
      this.setState({loading: false, editor})
     
	  
	  	 

    } catch (e) {
      this.setState({loading: false, error: true})
    }
  } 

      constructor(props) {
        super(props);

    }





    camera=()=>{
        alert('打开摄像头拍照')
    }
    album=()=>{
        alert('打开相册')
    }
	
	

    submit=()=>{
        if (!this.state.editor.title) {
           alert('请输入您的姓名');
            return;
        }
        if (!this.state.editor.sex) {
            alert('请输入您的性别');
            return;
        }
        if (!this.state.editor.job) {
            alert('请输入您的职业');
            return;
        }
        if (!this.state.editor.birthday) {
            alert('请输入您的生日');
            return;
        }

        if (!this.state.editor.tel) {
            alert('请输入您的手机号');
            return;
        }

        if (!this.state.editor.email) {
            alert('请输入您的邮箱');
            return;
        }
		
		var b = new Date(this.state.editor.birthday);
        this.state.editor.birthday = b.getFullYear() + '-' + (b.getMonth() + 1) + '-' + b.getDate();
        this.state.editor.avoirdupois = this.state.editor.avoirdupois || "";
        this.state.editor.star = this.state.editor.star || "";
        this.state.editor.nation = this.state.editor.nation || "";
        this.state.editor.nativeplace = this.state.editor.nativeplace || "";
        this.state.editor.school = this.state.editor.school || "";
        this.state.editor.interest = this.state.editor.interest || "";
		
		

        var newd = new Date()
        let userData = new FormData();
        userData.append('id','');
		
//       if(this.state.editor.sex=='男'){
//          this.state.editor.sex = '1';
//       }else{
//          this.state.editor.sex = '0';
//       }


  caculStar = function() {
        var stars = [ '水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', 
                    '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'];
        var b = new Date(this.state.editor.birthday);
        var m = b.getMonth() + 1;
        var d = b.getDate();

        if(d <= 22) {
            if( 1 != m ){
                star = stars[m - 2];
            }else{
                star = stars[11];
            }
        } else {
            star = stars[m - 1];
        }

        this.state.editor.star = star;
    };

        var  saveData = {
            'id':'',
            'title':this.state.editor.title,
            'sign':this.state.editor.sign,
            'sex':this.state.editor.sex,
            'stature':this.state.editor.stature,
            'avoirdupois':this.state.editor.avoirdupois,
            'birthday':this.state.editor.birthday,
            'star':this.state.editor.star,
            'nativeplace':this.state.editor.nativeplace,
            'job':this.state.editor.job,
            'lang':this.state.editor.lang,
            'school':this.state.editor.school,
            'interest':this.state.editor.interest,
            'act_type':this.state.editor.act_type,
            'proxy_company':this.state.editor.proxy_company,
            'works':this.state.editor.works,
            'job_exp':this.state.editor.job_exp,
			'honour':this.state.editor.honour,
			'tel':this.state.editor.tel,
			'wx':this.state.editor.wx,
			'qq':this.state.editor.qq,
			'email':this.state.editor.email,
			'body':this.state.editor.body,


        }

        saveData=JSON.stringify(saveData);
        userData.append('saveData',saveData);
        userData.append('username','13738127783');
        userData.append('password','garefu');
        userData.append('openid','');
        userData.append('from_client','cc');
        userData.append('client_ver','0.4.5');

        var fetchOptions = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                //json形式
                'Content-Type': 'multipart/form-data'
            },
            body: userData
        };

        var url ='http://121.42.49.27:8002/api/cc/act?mod=user3&act=save'
        fetch(url,fetchOptions)

            .then((response) => response.json())
            .then((responseText) => {
                alert(JSON.stringify(responseText));
            }).done();

    }


    render() {

        return ( 
		<ScrollView>
		< View style = {styles.Content} >
		
		<Image style={styles.photo} source={require('./favicon.png')}/>
              <View style={styles.getPhoto}>
              <TouchableOpacity onPress={this.camera} style={styles.camera}><Text style={styles.cameraText}>拍照</Text></TouchableOpacity>
              <TouchableOpacity onPress={this.album} style={styles.album}><Text style={styles.albumText}>相册</Text></TouchableOpacity>
              </View>
		
            < View style = {styles.Part1} >
            < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 姓名 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onEndEditing ={(text) => {this.state.editor.title=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.title} 
			  placeholder="请输入您的姓名"/>
            </View >
		  
            < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 签名 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.sign=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.sign} 
			  placeholder="请输入您的签名"/>
            < /View>			
		 
            < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 性别 < /Text>
			<View style={styles.lineView}></View>
			<ModalDropdown options={['女', '男']}
			 defaultValue = {(this.state.editor.sex==0)?'女':'男'} 
			 onSelect = {(value) => {this.state.editor.sex =value}}
			 style={styles.inputBoxSelect} 
			 />
            < /View>	
    
	        < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 身高 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.stature=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.stature} 
			  placeholder="请输入您的身高"/>
            < /View>
		  
		    < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 体重 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.avoirdupois=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.avoirdupois} 
			  placeholder="请输入您的体重"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 生日 < /Text>
			<View style={styles.lineView}></View>
			       <DatePicker
          style={{width: 200}}
          date={this.state.editor.birthday}
          mode="date"
          placeholder="请输入您的生日"
          format="YYYY-MM-DD"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          iconSource={require('./date_icon.png')}
		  style={styles.inputBox1} 
          onDateChange={(date) => {this.setState({date: date});}}
        />
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 星座 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.star=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.star} 
			  placeholder="请输入您的星座"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 籍贯 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.nativeplace=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.nativeplace} 
			  placeholder="请输入您的籍贯"/>
            < /View>
		  
		    < View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 职业 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.job=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.job} 
			  placeholder="请输入您的职业"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 语言能力 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.lang=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.lang} 
			  placeholder="请输入您的语言能力"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 毕业院校 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.school=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.school} 
			  placeholder="请输入您的毕业院校"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 特长爱好 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.interest=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.interest} 
			  placeholder="请输入您的特长爱好"/>
            < /View>
            < /View>
			
			<View style={styles.Part2}>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 表演风格 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.act_type=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.act_type} 
			  placeholder="请输入您的表演风格"/>
            < /View>
			
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 经纪公司 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.proxy_company=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.proxy_company} 
			  placeholder="请输入您的经纪公司"/>
            < /View>
			< /View>
			
			< Text style = {styles.nameLabel2}  > 代表作品 < /Text>
			< View style={styles.Part3}>
			 <TextInput onChangeText={(text) => {this.state.editor.works=text}} 
			  style={styles.multiline}
			  multiline = {true} 
			  numberOfLines = {4}
			  defaultValue={this.state.editor.works} 
			  placeholder="请输入您的代表作品"/>
			< /View>
			
			< Text style = {styles.nameLabel2}  > 职业经历 < /Text>
			< View style={styles.Part3}>
			<TextInput onChangeText={(text) => {this.state.editor.job_exp=text}} 
			  style={styles.multiline}
			  multiline = {true} 
			  numberOfLines = {4}
			  defaultValue={this.state.editor.job_exp} 
			  placeholder="请输入您的职业经历"/>
			< /View>
			
			< Text style = {styles.nameLabel2}  > 所获奖项 < /Text>
			< View style={styles.Part3}>
			<TextInput onChangeText={(text) => {this.state.editor.honour=text}} 
			  style={styles.multiline}
			  multiline = {true} 
			  numberOfLines = {4}
			  defaultValue={this.state.editor.honour} 
			  placeholder="请输入您的所获奖项"/>
			< /View>
			
			< Text style = {styles.nameLabel2}  > 联系方式 < /Text>
			< View style={styles.Part4}>
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 电话号码 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.tel=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.tel} 
			  placeholder="请输入您的电话号码"/>
            < /View>
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 微信号 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.wx=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.wx} 
			  placeholder="请输入您的微信号"/>
            < /View>
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > QQ号 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.qq=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.qq} 
			  placeholder="请输入您的QQ号"/>
            < /View>
			< View style = {styles.itemView} >
            < Text style = {styles.nameLabel} > 电子邮箱 < /Text>
			<View style={styles.lineView}></View>
			<TextInput onChangeText={(text) => {this.state.editor.email=text}} 
			  style={styles.inputBox1} 
			  defaultValue={this.state.editor.email} 
			  placeholder="请输入您的电子邮箱"/>
            < /View>
			< /View>
			
			< Text style = {styles.nameLabel2}  > 个人简介&自我评价 < /Text>
			< View style={styles.Part3}>
			<TextInput onChangeText={(text) => {this.state.editor.body=text}} 
			  style={styles.multiline}
			  multiline = {true} 
			  numberOfLines = {4}
			  defaultValue={this.state.editor.body} 
			  placeholder="请输入您的个人简介&自我评价"/>
			< /View>
			
			<TouchableOpacity onPress={this.submit} style={styles.submit}>
                        <Text style={styles.submitText}>保存</Text>
                    </TouchableOpacity>
			
		  </View >
</ScrollView>

        );
    }
}

const styles = StyleSheet.create({
	
    Content: {
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
    },
	
    Part1: {
        alignItems: 'center',
        backgroundColor: '#ffffff',
        width: 330,
        height: 600,
        marginTop: 20,
    },

    Part2: {
        backgroundColor: '#ffffff',
        width: 330,
        height: 100,
        marginTop: 20,

    },
	
    Part3: {
        backgroundColor: '#ffffff',
        width: 330,
        height: 120,
        marginTop: 5,
        marginBottom: 20,
		
    },
	
	Part4: {
        backgroundColor: '#ffffff',
        width: 330,
        height: 250,
        marginTop: 5,
        marginBottom: 20,

    },
	
    itemView: {
        alignItems: 'flex-start',
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        width: 330,
        height: 60,
        borderWidth: 0.5,
		borderColor: '#dddddd',

    },
	
	
    nameLabel: {
        fontSize: 18,
        textAlign: 'center',
        marginTop: 15,
        width: 100,
        height: 30,
		color: '#387ef5',
    },
	
	nameLabel2: {
        fontSize: 18,
        textAlign: 'left',
        marginTop: 15,
        width: 300,
        height: 30,

    },
	
    lineView: {
        width: 1,
        height: 30,
        marginTop: 10,
        backgroundColor: '#dddddd',

    },
	
    inputBox1: {
        width: 200,
        height: 30,
        marginTop: 10,
        marginLeft: 10,
    },
	
	  inputBoxSelect: {
        width: 200,
        height: 30,
        marginLeft: 20,
		marginTop: 16,
    },
	
	multiline: {
        width: 310,
        height: 100,
        marginTop: 10,
        marginLeft: 10,
        backgroundColor: '#ffffff',
		borderWidth: 0.5,
		borderColor: '#dddddd',
    },
	photo:{
        marginTop:20,
        width:150,
        height:180,

    },

    getPhoto:{
        marginTop:20,
        flexDirection:'row',
        alignItems: 'flex-start',
        width:150,
        height:25,

    },
    camera:{
        width:50,
        height:25,
        backgroundColor: '#387ef5',

    },
    cameraText:{
        fontSize:16,
		textAlign: 'center',
    },
    albumText:{
        fontSize:16,
		textAlign: 'center',
    },
    album:{
        marginLeft:50,
        width:50,
        height:25,
        backgroundColor: '#387ef5',

    },
    submit:{
        marginTop:20,
        marginBottom:30,
        flexDirection:'row',
        alignItems: 'flex-start',
        width:50,
        height:30,
        backgroundColor: '#f58c38',
    },
    submitText:{
        marginTop:4,
        flexDirection:'row',
        alignItems: 'flex-start',
        textAlign: 'center',
		justifyContent: 'center',
        alignItems: 'center',
        fontSize:16,
        width:50,
        height:30,
        backgroundColor: '#f58c38',
    }

});
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册

AppRegistry.registerComponent('YrbReactNative', () => YrbMemberInfo);